import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";
import type {ProTableProps} from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import type {SysMenuData, SysMenuParams, SysMenuAdd} from "@/pages/system/menu/type";
import columns from "@/pages/system/menu/list/config/columns";
import {Button, message, Space} from "antd";
import React, {useRef, useState} from "react";
import type {ActionType} from "@ant-design/pro-table/lib/typing";
import {
  downloadSysMenuExport,
  downloadSysMenuExportTemplate,
  sysMenuImport,
  sysMenuUpdate,
  sysMenuAdd,
  sysMenuPageList,
  sysMenuRemove, getRoutes
} from "@/services/system/menu/api";
import {history} from "umi";
import type {OptionActions} from "@/type/type";
import AddSysMenu from "@/pages/system/menu/list/components/AddSysMenu";
import type {ProFormInstance} from "@ant-design/pro-form";
import {ModalForm} from "@ant-design/pro-form";
import {baseRoute, route404} from "@/utils/route";
import ReactJson from "react-json-view";

export default () => {

  const actionRef = useRef<ActionType>();
  const [selectedRowKeys, setSelectedRowKeys] = useState<(number | string)[]>([]);
  const [routeCode, setRouteCode] = useState<any>([]);
  const sysMenuAddRef: React.MutableRefObject<ProFormInstance<SysMenuAdd> | undefined> = useRef<ProFormInstance<SysMenuAdd> | undefined>();
  const optionAction: OptionActions<SysMenuAdd, SysMenuData> = {
    import: {
      maxCount: 1,
      showUploadList: false,
      beforeUpload: (file) => {
        const formData = new FormData();
        formData.append('file', file);
        sysMenuImport(formData).then((res) => {
          actionRef?.current?.reload();
        });
      }
    },
    edit(data) {
      // @ts-ignore
      sysMenuUpdate(data as SysMenuAdd).then(res => {
        message.success("编辑成功").then(res => {
        })
        setSelectedRowKeys([]);
        actionRef.current?.reload();
      });
    },
    editModal: (data: SysMenuData) => {
      return {
        trigger: <Button type="link" onClick={() => {
          sysMenuAddRef.current?.setFieldsValue(data)
        }}>编辑</Button>,
        onFinish: async (formData) => {
          await sysMenuAddRef.current?.validateFields().then(res => {
            const sysMenu: any = {
              ...formData,
              id: data.id
            }
            // eslint-disable-next-line @typescript-eslint/no-shadow
            sysMenuUpdate(sysMenu).then(res => {
              message.success("操作成功")
              sysMenuAddRef.current?.resetFields();
              actionRef.current?.reload();
            })
          })
          return true
        },
        formRef: sysMenuAddRef,
        title: "新增菜单表",
      }
    },
    add() {
      history.push({
        pathname: "/system/manager/menu/authButton"
      })
    },
    addModal(id) {
      return {
        trigger: <Button type="primary">新增</Button>,
        onFinish: async (formData) => {
          await sysMenuAddRef.current?.validateFields().then(res => {
            const data: SysMenuAdd = {
              ...formData as SysMenuAdd,
              pid: id,
              menu: !!(formData as SysMenuAdd).route
            }
            sysMenuAdd(data).then(res => {
              message.success("新增成功")
              sysMenuAddRef.current?.resetFields();
              actionRef.current?.reload();
            })
          })
          return true
        },
        formRef: sysMenuAddRef,
        title: "新增菜单表",
      }
    },
    export() {
      downloadSysMenuExport(selectedRowKeys).then(res => {
        message.success("导出成功").then(res => {
        })
        setSelectedRowKeys([]);

      })
    },
    remove(ids) {
      sysMenuRemove([...ids, ...selectedRowKeys]).then(res => {
        message.success("删除成功").then(res => {

        })
        setSelectedRowKeys([]);
        actionRef.current?.reload();
      });
    },
    exportTemplate() {
      downloadSysMenuExportTemplate().then(res => {
        message.success("下载成功").then(res => {
        })
      })
    }
  }

  // @ts-ignore
  // @ts-ignore
  // @ts-ignore
  const tableProps
    :
    ProTableProps<SysMenuData, SysMenuParams> = {
    tableStyle: {},
    size: "small",
    bordered: true,
    // @ts-ignore
    columns: columns(optionAction),
    request: async (params, sort, filter) => {
      return await sysMenuPageList(params).then(res => {
        return {
          data: res.data,
          success: true,
        }
      })
    },
    headerTitle: (
      <Space>
        {/*// @ts-ignore*/}
        <AddSysMenu {...optionAction.addModal(0)}/>
        <ModalForm
          trigger={<Button type={"primary"} onClick={() => {
            getRoutes().then(res => {
              setRouteCode([...baseRoute, ...res.data, ...route404])
            })
          }}>预览路由代码</Button>}
          submitter={false} title={"路由代码"}>
          <div style={{height: 650, overflow: 'auto',}}>
            <ReactJson src={routeCode}/>
          </div>
        </ModalForm>

        {/*<Upload {...optionAction.import}>*/}
        {/*  <Button type="primary">导入</Button>*/}
        {/*</Upload>*/}
        {/*<Button type="primary" onClick={() => optionAction.export()}>导出</Button>*/}
        {/*<Button type="primary" onClick={() => optionAction.exportTemplate()}>导出模版</Button>*/}
      </Space>
    ),
    actionRef,
    rowKey: "id",
    pagination: false,
    search: false
  }
  return (
    <PageContainer>
      <ProCard>
        <ProTable<SysMenuData, SysMenuParams> {...tableProps}>
        </ProTable>
      </ProCard>
    </PageContainer>
  )
}
